﻿<!DOCTYPE html>
<html lang="">
    <head lang="en">
        <meta charset="UTF-8">
        <title>系统登录 - 超市订单管理系统</title>
        <link type="text/css" rel="stylesheet" href="css/style.css"/>
        <link type="text/css" rel="stylesheet" href="element-ui/index.css"/>
        <style>
            .loginCont {
                background: url("images/formBg.png") 0 0 no-repeat;
                padding-top: 68px;
            }

            .loginCont .el-input, .el-button {
                width: 245px;
            }
        </style>
    </head>
    <body class="login_bg">
        <section class="loginBox">
            <header class="loginHeader">
                <h1>超市订单管理系统</h1>
            </header>
            <section id="loginCont" class="loginCont">
                <el-form :rules="rules" :model="user" label-width="80px">
                    <el-form-item prop="userCode">
                        <el-input v-model="user.userCode" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="userPassword">
                        <el-input v-model="user.userPassword" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </section>
        </section>
        <script src="js/vue.js"></script>
        <script src="js/axios.min.js"></script>
        <!--element-ui是依赖于vue的，所以得先引入vue.js-->
        <script src="element-ui/index.js"></script>
        <script>
            var vue = new Vue({
                el:"#loginCont",
                data:{
                    user:{},
                    rules:{
                        userCode:[{required:true, message:"请输入账号",trigger:"blur"}],
                        userPassword:[{required:true, message:"请输入密码",trigger:"blur"}]
                    }
                },
                methods:{
                    login(){
                        axios.post("userLogin",this.user)
                            .then(response=>{
                                localStorage.userName = response.data.data.userName;
                                location.href = "view/index.html";
                            })
                            .catch(error=>{
                                console.log(error)
                            })
                    }
                }
            });
        </script>
    </body>
</html>
